<template>
	<view class="mainbgc">
		<backtop ref="backtops"></backtop>
		<view class="content">
			<!-- 弹窗行业-->
			<u-popup :show="show" :round="10" mode="bottom" @close="show=false">
				<view class="nav">
					<view class="form">招标类型</view>
					<view class="flexleft flex_wrap">
						<view :class="item.ischeck?' lan':'pu'" v-for="(item,index) in zblist" :key="item.id"
							@click="changeitem(item)">
							{{item.name}}
						</view>
					</view>
					<view class="footer flexbetween">
						<view class="resetbtn" @click="resetzblx">重置</view>
						<view class="surebtn" @click="Confirmzblx">确认</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="show_cpfl" :round="10" mode="bottom" @close="show_cpfl=false">
				<view class="form">招标分类</view>
				<view class="flexleft">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="leftscroll">
						<view :class="item.ischeck?'itemfocus':'itemnofocus'" v-for="(item,index) in cpfllist"
							:key="item.id" @click="changestatus(item,index)">
							<view :class="item.ischeck?'lablefocus':'lablenofocus'">{{item.name}}</view>
						</view>
					</scroll-view>
					<!-- <view :class="item.ischeck?' lan':'pu'" v-for="(item,index) in cpfllist" :key="item.id"
						@click="changeitem(item)">
						{{item.name}}
					</view> -->
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="rightscroll mainpadding">
						<view v-for="item in rightlist" :key="item.id">
							<view class="titletext">{{item.name}}</view>
							<view class="flexleft flex_wrap">
								<view
									:class="ite.ischeck?'focusbgc margin_top itemlable margin_right':'nofocusbgc margin_top itemlable margin_right'"
									v-for="ite in item.childlist" :key="ite.id" @click="changesmallStatus(ite,item.id)">
									{{ite.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="footer flexbetween">
					<view class="resetbtn" @click="resetcpfl">重置</view>
					<view class="surebtn" @click="Confirmcpfl">确认</view>
				</view>
			</u-popup>
			<!-- 搜索框 -->
			<view class="flexleft">
				<view class="ss flexleft">
					<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
					<input type="text" placeholder="求购托盘" class="inp" v-model="keywords" confirm-type="search"
						@confirm="init">
				</view>
				<view class="sea" @click="sea">搜索</view>
			</view>
			<!-- 轮播图 -->
			<view class="margin_top">
				<u-swiper :list="list1" height="150" @change="e => currentNum = e.current" keyName="image_text"
					@click="jumprul(list1,currentNum)" circular></u-swiper>
			</view>
			<!--  -->
			<view class="flexbetween header">

				<view class="flexleft nostrongtext" @click="show=true">招标类型<view class="grey_jiao paixu"></view>
				</view>
				<view class="flexleft nostrongtext" @click="show_cpfl=true">产品分类<view class="grey_jiao paixu"></view>
				</view>
				<uni-data-picker @change="bindPickerChange" :localdata="items">
					<view class="flexleft nostrongtext">地区<view class="grey_jiao paixu"></view>
					</view>
				</uni-data-picker>
			</view>
			<!--  -->
			<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
				<view class="placeimage"></view>
			</view>
			<view class="" v-if="list.data.length">
				<view class="center" @click="details(item.id)" v-for="item in list.data" :key="item.id">
					<view class="yxlable" v-show="item.yx_type==1">优选</view>
					<view class="flexbetween flex_wrap">
						<view class="flexleft">
							<view class="image_ya">
								<image :src="item.user.avatar_text" mode=""></image>
							</view>
							<view class="center_zi ">
								<view class="word_hei flexleft">
									{{item.user.nickname}}
									<view class="vip" v-if="item.user.vip_status==1">VIP认证</view>
									<view class="header_pt" v-if="!item.user.vip_status && item.user.platform_status==1">平台认证</view>
								</view>
								<view class="hui time">{{item.createtime_text}}</view>
							</view>
						</view>
						<view class="flexleft">
							<view class="province_jiangsu">{{item.cityinfo}}</view>
						</view>
					</view>
					<!-- l类型 -->
					<view class="flexleft lx flex_wrap">
						<view :class="ite.type==1?'leixing':'fenlei'" v-for="ite in item.flags" :key="ite">{{ite.name}}
						</view>
					</view>
					<view class="hei">{{item.title}}</view>
					<view class="hui_zi">{{item.des}}</view>
					<!-- 图片 -->
					<view class="flexleft margin_top flex_wrap">
						<view class="item_image_box flexcenter" v-for="(ite,index) in item.images_text" :key="index">
							<view class="item_image">
								<image :src="ite" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="footertextdaodi">老板！到底没数据了！</view>
			</view>

		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				currentNum: 0,
				list1: [],
				// 招标类型开始
				zblist: [], //招标筛选列表 
				show: false, //招标弹出层
				bidding_item_id: "", //招标切换状态
				zblxname: "",
				// 招标类型结束
				// 产品分类开始
				show_cpfl: false,
				cpfllist: [], //招标分类筛选列表
				rightlist: [],
				category_id: "", //产品分类切换状态
				cpflname: "",
				// 产品分类结束
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				items: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keywords: "",
				categoryIdList: [],
				categoryNameList: [],
				oneCategoryId:"",
				lastchangeindex: 0,
			}
		},
		onLoad() {
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children.unshift({
						"value": "",
						"text": "不限",
						"pid": ""
					})
				})
				item.children.unshift({
					"value": "",
					"text": "不限",
					"pid": "",
				})
			})
			arr.unshift({
				"value": "",
				"text": "全国",
				"pid": "",
			})
			this.items = arr
			this.zhaobiaolist() //招标类型列表
			this.chanpinlist()
			this.init()
			this.getlbt()
		},
		onPageScroll(res) {
			if (res.scrollTop > 700) {
				this.$refs.backtops.isshow = true
			} else {
				this.$refs.backtops.isshow = false
			}
		},
		methods: {
			getlbt() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 17,
					is_more: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.list1 = res.data
					}
				})
			},
			jumprul(item, index) {
				let i = []
				item.forEach(items => {
					i.push(items.image_text)
				}) //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
				if (item.url == "") {
					return false
				}
				uni.navigateTo({
					url: item.url
				})
			},
			// 获取优选仓库列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/bidding/getBiddingList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					keywords: this.keywords,
					province_id: this.address.province, //省ID
					city_id: this.address.city, //市ID
					area_id: this.address.county, //区ID
					bidding_item_id: this.bidding_item_id,
					category_id: this.category_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}

				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			changeitem(item) {
				item.ischeck = !item.ischeck
			},
			resetzblx() {
				this.zblist.forEach(item => {
					item.ischeck = false
				})
				this.bidding_item_id = ""
				this.zblxname = ""
				this.init()
				this.show = false
			},
			resetcpfl(value) {
				// this.cpfllist.forEach(item => {
				// 	item.ischeck = false
				// })
				this.cpfllist.forEach(items => {
					items.childlist.forEach(item => {
						item.childlist.forEach(ite => {
							ite.ischeck = false
						})
					})
				})
				this.category_id = ""
				this.oneCategoryId = ""
				this.categoryIdList = []
				if (value == 1) {
					return false
				}
				this.show_cpfl = false
				this.init()
			},
			Confirmzblx() {
				let arr = []
				let arr1 = []
				this.zblist.forEach(item => {
					if (item.ischeck) {
						arr.push(item.id)
						arr1.push(item.name)
					}
				})
				this.bidding_item_id = arr.join()
				this.zblxname = arr1.join()
				this.init()
				this.show = false

			},
			changestatus(data,index) {
				this.cpfllist[this.lastchangeindex].childlist = this.rightlist
				this.lastchangeindex = index
				this.cpfllist.forEach(item => {
					if (item.id == data.id) {
						item.ischeck = true
						this.rightlist = item.childlist
					} else {
						item.ischeck = false
					}
				})
				this.resetcpfl(1)
			},
			changesmallStatus(data,id) {
				if (!this.oneCategoryId) {
					this.resetcpfl(1)
					this.oneCategoryId = id
					data.ischeck = !data.ischeck
					this.rightlist.forEach(item => {
						item.childlist.forEach(ite => {
							if (ite.ischeck) {
								let index = this.categoryIdList.indexOf(ite.id)
								if (index == -1) {
									this.categoryIdList.push(ite.id)
									this.categoryNameList.push(ite.name)
								}
							} else {
								let index = this.categoryIdList.indexOf(ite.id)
								if (index != -1) {
									this.categoryIdList.splice(index, 1)
									this.categoryNameList.splice(index, 1)
								}
							}
						})
					})
				} else {
					if (this.oneCategoryId == id) {
						data.ischeck = !data.ischeck
						this.rightlist.forEach(item => {
							item.childlist.forEach(ite => {
								if (ite.ischeck) {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index == -1) {
										this.categoryIdList.push(ite.id)
										this.categoryNameList.push(ite.name)
									}
								} else {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index != -1) {
										this.categoryIdList.splice(index, 1)
										this.categoryNameList.splice(index, 1)
										if (!this.categoryIdList.length) {
											this.oneCategoryId = ""
										}
									}
								}
							})
						})
					}else {
						this.resetcpfl(1)
						data.ischeck = !data.ischeck
						this.rightlist.forEach(item => {
							item.childlist.forEach(ite => {
								if (ite.ischeck) {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index == -1) {
										this.categoryIdList.push(ite.id)
										this.categoryNameList.push(ite.name)
									}
								} else {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index != -1) {
										this.categoryIdList.splice(index, 1)
										this.categoryNameList.splice(index, 1)
										if (!this.categoryIdList.length) {
											this.oneCategoryId = ""
										}
									}
								}
							})
						})
					}
				}
				console.log(this.categoryIdList)
			},
			Confirmcpfl() {
				// let arr = []
				// let arr1 = []
				// this.cpfllist.forEach(item => {
				// 	if (item.ischeck) {
				// 		arr.push(item.id)
				// 		arr1.push(item.name)
				// 	}
				// })
				// this.rightlist.forEach(item => {
				// 	item.childlist.forEach(ite => {
				// 		if (ite.ischeck) {
				// 			// this.category_id = ite.id
				// 			// this.category_name = ite.name
				// 			arr.push(ite.id)
				// 			arr1.push(ite.name)
				// 		}
				// 	})
				// })
				// this.category_id = arr.join()
				// this.cpflname = arr1.join()
				this.category_id = this.categoryIdList.join()
				this.cpflname = this.categoryNameList.join()
				this.init()
				this.show_cpfl = false
			},
			chanpinlist() {
				httpRequest.request('/api/goods/categoryList', 'GET', {
					hot_status: 0,
					category_type: 2
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
							item.childlist.forEach(ite => {
								ite.childlist.forEach(it => {
									this.$set(it, "ischeck", false)
								})
							})
						})
						res.data[0].ischeck = true
						this.cpfllist = res.data
						this.rightlist = res.data[0].childlist
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			zhaobiaolist() {
				httpRequest.request('/api/bidding/biddingItem', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
						})
						this.zblist = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/index/zhaobiaoxmxq?id=' + id
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				if (area.length == 3) {
					this.area = [area[0].text, area[1].text, area[2].text];
					this.address.province = area[0].value;
					this.address.city = area[1].value;
					this.address.county = area[2].value == "0312" ? "" : area[2].value;
				} else if (area.length == 2) {
					this.area = [area[0].text, area[1].text, "不限"];
					this.address.province = area[0].value;
					this.address.city = area[1].value == "0311" ? "" : area[1].value;
					this.address.county = ""
				} else {
					this.area = ["全国", "不限", "不限"];
					this.address.province = "";
					this.address.city = "";
					this.address.county = ""
				}
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 分类列表滚动
	.leftscroll {
		height: 500rpx;
		width: 200rpx;
	}
.itemnofocus {
			background-color: #fff;
			padding: 25rpx 0 25rpx 20rpx;
			text-align: center;
		}

		// 选中
		.itemfocus {
			background-color: #fafafa;
			padding: 25rpx 0 25rpx 20rpx;
			text-align: center;
		}

	.lablefocus {
		width: 100%;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #228DFF;
		border-left: 2rpx solid #228DFF;
		// padding-left: 10rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}
	
	.lablenofocus {
		width: 100%;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
		padding-left: 2rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.rightscroll {
		width: calc(100vw - 200rpx);
		background-color: #fafafa;
		height: 500rpx;
		box-sizing: border-box;
	}

	.focusbgc {
		background-color: rgba(34, 141, 255, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.nofocusbgc {
		background-color: #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.itemlable {
		padding: 15rpx 35rpx;
		border-radius: 10rpx;
	}

	// 分类列表滚动结束
	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.item_image_box {
		width: 25%;
	}

	.item_image {
		width: 144rpx;
		height: 144rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.paixu {
		margin-left: 6rpx;
		margin-top: 6rpx;
	}

	.content {
		padding: 30rpx 24rpx;
	}

	.lx {
		padding-top: 30rpx;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
	}

	.ss {
		width: 560rpx;
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 18rpx 20rpx 18rpx 42rpx;
	}

	.inp {
		background-color: #f3f3f3;
		width: 400rpx;
		padding: 0rpx 0rpx 0rpx 24rpx;
	}

	input:input-placeholder {
		font-size: 24rpx;
	}

	.sea {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #228DFF;
		padding-left: 20rpx;
	}

	.header {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 27rpx 28rpx 27rpx 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	// 
	.center {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx;
		position: relative;
	}

	.section {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx;
	}

	.center_zi {
		padding: 0rpx 20rpx;
	}

	.hei {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding: 20rpx 0rpx;
	}

	.hui_zi {
		// width: 500rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		//超出两行省略号
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.comment {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.ya {
		padding: 34rpx 19rpx 0rpx 30rpx;
	}

	.vip {
		margin-left: 20rpx;
	}

	.leixing {
		background: RGBA(233, 244, 255, 1);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 4rpx 29rpx 4rpx 39rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.fenlei {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFA500;
		background: RGBA(255, 246, 230, 1);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		padding: 4rpx 29rpx 4rpx 39rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.form {
		text-align: center;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 70rpx 21rpx 70rpx;
		margin: 30rpx 0rpx 0rpx 30rpx;
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 20rpx 70rpx 21rpx 70rpx;
		margin: 30rpx 0rpx 0rpx 30rpx;
	}

	.footer {
		padding: 50rpx 30rpx;
	}

	.nav {
		padding: 30rpx 30rpx;
	}

	.transport {
		height: 270rpx;
		overflow-x: hidden;
	}

	.time {
		padding-top: 13rpx;
	}

	.item_image_box {
		width: 25%;
	}
</style>